<template>
  <div class="home">
    <div style="width: 100%;height: 40px;margin-bottom: 20px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="年">
          <el-input v-model="form.year" placeholder="年" />
        </el-form-item>
        <el-form-item label="月">
          <el-input v-model="form.month" placeholder="月" />
        </el-form-item>
        <el-form-item label="日">
          <el-input v-model="form.day" placeholder="日" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form></div>
    <el-row :gutter="10" style="height: 100%;">
      <el-col :span="18">
        <div class="count-box">
          <div class="count-card">
            <div class="count-card-item item1">
              <div class="count-card-item-title">用户数量总和</div>
              <div class="count-card-item-value">{{ customerSum }}</div>
            </div>
            <div class="count-card-item">
              <div class="count-card-item-title">交易金额总和</div>
              <div class="count-card-item-value">{{ transAmountSum }}</div>
            </div>
          </div>
          <div id="chartBox" class="chart-box" />
        </div>
      </el-col>
      <el-col :span="6">
        <div id="circleBox" class="incre-box" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCountData } from '@/api/home'
import * as echarts from 'echarts'
export default {
  name: 'Index',
  data() {
    return {
      obj: {
        'total': 1,
        'rows': [
          {
            'customerSum': 4,
            'transAmountSum': 10300,
            'businessInfo': [
              {
                'name': '客户部门',
                'value': 300
              },
              {
                'name': '测试客户1',
                'value': 0
              }
            ],
            'incrBusinessInfo': []
          }
        ],
        'code': 200,
        'msg': '查询成功'
      },
      form: {
        year: '',
        month: '',
        day: ''
      },
      businessInfo: {
        chartxData: [],
        chartyData: []
      },
      incrBusinessInfo: [],
      customerSum: 0,
      transAmountSum: 0,

      chart: null,
      circleChart: null
    }
  },
  created() {
    this.getHomeCountData()
  },
  mounted() {
    this.initChart()
    this.initCircleChart()
    window.onresize = () => {
      this.chart.resize()
      this.circleChart.resize()
    }
  },
  methods: {
    // 获取统计数据
    getHomeCountData() {
      getCountData({ year: this.form.year, month: this.form.month, day: this.form.day }).then(res => {
        if (res.code === 200) {
          this.customerSum = res.rows[0].customerSum
          this.transAmountSum = res.rows[0].transAmountSum
          this.businessInfo.chartxData = res.rows[0].businessInfo.map(item => item.name)
          this.businessInfo.chartyData = res.rows[0].businessInfo.map(item => item.value)
          this.incrBusinessInfo = res.rows[0].incrBusinessInfo
        }
      })
      // const res = this.obj
      // if (res.code === 200) {
      //   this.customerSum = res.rows[0].customerSum
      //   this.transAmountSum = res.rows[0].transAmountSum
      //   this.businessInfo.chartxData = res.rows[0].businessInfo.map(item => item.name)
      //   this.businessInfo.chartyData = res.rows[0].businessInfo.map(item => item.value)
      //   this.incrBusinessInfo = res.rows[0].incrBusinessInfo
      // }
    },
    initChart() {
      const dom = document.getElementById('chartBox')
      this.chart = echarts.init(dom)
      const option = {
        xAxis: {
          type: 'category',
          data: this.businessInfo.chartxData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '交易金额前十商户',
            data: this.businessInfo.chartyData,
            type: 'bar',
            itemStyle: {
              color: '#0084ff' // 设置柱状图的颜色
            }
          }
        ]
      }
      this.chart.setOption(option)
    },
    initCircleChart() {
      const dom = document.getElementById('circleBox')
      this.circleChart = echarts.init(dom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '新增商户数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.incrBusinessInfo
          }
        ]
      }
      this.circleChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: calc(100vh - 84px);;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  .count-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .count-card {
      width: 100%;
      height: 200px;
      display: flex;
      flex-direction: row;
      margin-bottom: 20px;
      box-shadow: 1px 1px 10px #ccc;
      border-radius: 15px;
      .count-card-item {
        width: 50%;
        height: 100%;
        background-color: rgb(181, 118, 246);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        padding-top: 50px;
        box-sizing: border-box;
        .count-card-item-title, .count-card-item-value {
          font-size: 30px;
        }
        .count-card-item-title {
          margin-bottom: 20px;
        }
      }
      .count-card-item:first-child {
        margin-right: 20px;
        background-color: rgb(90, 129, 255);
      }
    }
    .chart-box {
      height:500px;
      padding: 10px;
      box-sizing: border-box;
      color: #0084ff;
      box-shadow: 1px 1px 10px #ccc;
      border-radius: 15px;

    }
  }

  .incre-box {
    height: 670px;
    width: 100%;
    border-radius: 15px;
    box-shadow: 1px 1px 10px #ccc;
  }
}
</style>

